<template>
      <div id="hy">
            <div class="title">
                  <div class="left">
                        行业新闻
                  </div>
                  <div class="right" @click="newsMore">
                        更多
                  </div>
            </div>
            <div class="content">
                  <div class="item" v-for="(item,index) in listData" :key="index" @click="newsShow(item.id)">
                        <div class="imgbox">
                              <img :src="item.topic" alt="">
                        </div>
                        <div class="info">
                              <div class="titles">
                                    {{ item.title }}
                              </div>
                              <div class="abstract">
                                    {{ item.abstract }}
                              </div>
                              <div class="addtime">
                                    {{ item.addtime }}
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            props: {
                  hyData: Array,
            },
            computed: {
                  listData() {
                        return this.hyData 
                  }
            },
            methods: {
                  newsMore() {
                        this.$router.push("/more/2")
                  },
                  newsShow( id ) {
                        this.$router.push(`/newsshow/${id}`)
                  }
            },
      }
</script>

<style lang="scss" scoped>
#hy {
      width: 1080px;
      margin: 50px auto;
      .title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #000;
            .left {
                  font-size: 30px;
            }
            .right {
                  font-size: 16px;
                  cursor: pointer;
            }
      }
      .content {
            width: 100%;
            margin:  20px 0;
            .item {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin: 30px 0;
                  cursor: pointer;
                  .imgbox {
                        width: 230px;
                        height: 158px;
                        overflow: hidden;
                        img {
                              width: 230px;
                              height: 158px;
                              display: block;
                        }
                  }
                  .info {
                        margin-left: 60px;
                        height: 158px;
                        flex:1;
                        display: flex;
                        flex-direction: column;
                        
                        .titles {
                              font-size: 30px;
                        }
                        .abstract {
                              font-size: 18px;
                              margin: 8px 0;
                              color: #8D8D8D;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              -webkit-line-clamp: 2;
                              overflow: hidden;
                              text-overflow: ellipsis;
                        }
                        .addtime {
                              text-align: right;
                              color: #8D8D8D;
                        }
                  }
            }
      }
}
</style>